<template>
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="{ span: 4 }"
    >
      <a-form-item label="用户名" name="username2">
        <a-input v-model:value="formState.username" allow-clear />
      </a-form-item>
      <a-form-item label="密码" name="password1">
        <a-input-password v-model:value="formState.password" allow-clear />
      </a-form-item>
      <a-form-item label="验证码" name="code1">
        <a-input v-model:value="formState.code" allow-clear />
      </a-form-item>
    </a-form>
  </template>
  
  <script setup>
  import { reactive, ref } from "vue";
  import { message } from "ant-design-vue";
  const formRef = ref();
  const fileList = ref([]);
  
  const formState = reactive({
    username: "",
    password: "",
    code: "",
  });
  const rules = {
    username: [
      { required: true, message: "请输入用户名哦", trigger: "blur" },
      { min: 2, message: "用户名至少为两位哦", trigger: "blur" },
    ],
    password: [{ required: true, message: "密码必填哦", trigger: "blur" }],
    code: [{ required: true, message: "验证码必填哦", trigger: "blur" }],
  };

  defineExpose({
    formRef,
  });
  </script>
  
  <style lang="scss" scoped>
  </style>
  